<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./images/icon/demo.css">
    <link rel="stylesheet" href="./images/icon/iconfont.css">
    <title>管家</title>
</head>

<body>
    <div class="cont">
        <!-- 头部手机信号时间 -->
        <div class="Box Box_a">
            <div class="XH">
                <span class="iconfont icon-xinhao"></span>
                <span class="name">中国联通</span>
                <span class="iconfont icon-xinhao1"></span>
            </div>
            <div class="time">
                PM14:20
            </div>
        </div>
        <!-- 头部标题 -->
        <div class="Box Box_b flex">
            <span>未登录</span>
            <span>管家</span>
            <img src="./images/shouye_03.gif">
        </div>
        <!-- 用户头像 -->
        <div class="Box Box_c">
            <div class="photo">
                <div class="photoBg">
                    <img src="./images/renwu_07.gif" alt="">
                </div>
            </div>
            <div class="icon flex">
                <div class="feltIcon">
                    <img src="./images/jiaofei_11.gif" alt="">
                    <span>交物业费</span>
                </div>
                <div class="contIcon">
                </div>
                <div class="rightIcon">
                    <img src="./images/shequkuaibao_14.gif" alt="">
                    <span>社区快报</span>
                </div>
            </div>
        </div>
        <!-- 宫格部分 -->
        <div class="Box Box_d">
            <div class="juchi">
                <ul>
                    <li>
                        <div><img src="./images/meirong_19.gif" alt=""></div>
                        <span>美容</span>
                    </li>
                    <li>
                        <div><img src="./images/jiazheng_19.gif" alt=""></div>
                        <span>家政</span>
                    </li>
                    <li>
                        <div><img src="./images/shutong_19.gif" alt=""></div>
                        <span>疏通</span>
                    </li>
                    <li>
                        <div><img src="./images/weixiu_22.gif" alt=""></div>
                        <span>维修</span>
                    </li>
                    <li>
                        <div><img src="./images/kaisuo_23.gif" alt=""></div>
                        <span>开锁</span>
                    </li>
                    <li>
                        <div><img src="./images/waimai_23.gif" alt=""></div>
                        <span>外卖</span>
                    </li>
                    <li>
                        <div><img src="./images/ganxi_23.gif" alt=""></div>
                        <span>干洗</span>
                    </li>
                    <li>
                        <div><img src="./images/gengduo_23.gif" alt=""></div>
                        <span>更多</span>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 底部宫格 -->
        <div class="Box Box_e">
            <ul>
                <li>
                    <img src="./images/12306_23.gif" alt="">
                    <span>12306</span>
                </li>
                <li>
                    <img src="./images/weizhang_23.gif" alt="">
                    <span>违章查询</span>
                </li>
                <li>
                    <img src="./images/gongzuo_23.gif" alt="">
                    <span>工作推荐</span>
                </li>
                <li>
                    <img src="./images/yingshi_23.gif" alt="">
                    <span>最新影讯</span>
                </li>
            </ul>
        </div>
        <!-- 底部标签栏 -->
        <div class="Box Box_f">
            <ul>
                <li><img src="./images/linju_03.gif" alt=""><span>邻居</span></li>
                <li><img src="./images/guanjia_03.gif" alt=""><span>管家</span></li>
                <li><img src="./images/shangye_03.gif" alt=""><span>商业</span></li>
                <li><img src="./images/huodong_03.gif" alt=""><span>活动</span></li>
            </ul>
        </div>
    </div>
</body>

</html>